<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="../js/vue.js"></script>
  <title>数据代理</title>
  <!-- 数据代理原理 -->
  <script type="text/javascript">
    /* 
      Object.defineProperty(obj, prop, descriptor)
        obj：要定义属性的对象。
        prop：要定义或修改的属性的名称
        descriptor：要定义或修改的属性描述符
    */ 
    let Persion = {
      name:'lisi',
      sex:'男'
    }
    let number = 0
    Object.defineProperty(Persion,'age',{
      // value:18,
      // writable: true, // 如果为 true，则值可以被修改，否则它是只可读的
      // enumerable: true,// 如果为 true，则表示是可以遍历的，可以在for… .in Object.keys()中枚举出来
      // configurable: true // 如果为 true，则此属性可以被删除，这些特性也可以被修改，否则不可以

      // gte()函数（getter）会在 Persion 对象指定属性被访问时调用，且返回值为指定属性（此处为 age 属性）的值
      get:function() {
        console.log('Persion.age 被访问了');
        return number
      },
      // set()函数（setter）会在 Persion 对象指定属性被修改时调用，且会收到具体的修改值
      set:function(value) {
        console.log('Persion.age 将被修改，值为',value);
        number = value
        console.log('Persion.age --- ',Persion.age);
      }
    })
    console.log(Persion);
    console.log(Object.keys(Persion)); // Object.keys() 以数组形式返回参数对象的属性名
  </script>
  <!-- 实现简单数据代理 -->
  <script type="text/javascript">
    let obj1 = {x:1}
    let obj2 = {y:2}
    Object.defineProperty(obj2,'x',{
      set(value) {
        obj1.x = value
      },
      get() {
        return obj1.x
      }
    })
  </script>
</head>
<body>
  <div id="root">
    <h2>数据代理</h2>
    <hr>
    {{ name }} ==> {{ _data.name }}  <br>
    {{`data: {name:'lisi'}`}} ==> {{ `VM._data` }}  
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false 
    const vm = new Vue({
      el:'#root',
      data: {
        name:'lisi'
      }
    })
  </script>
</body>
</html>